﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>设备管理</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js"></script>
  <script src="../plugins/ElementUI/index-2.3.9.js"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
</head>
<body>
  <div id="app" v-cloak v-show="addShow" class="animated fadeInRight">
    <el-form ref="form" :model="form" label-width="80px" style="width: 900px">
      <el-row>
        <el-col :span="11">
          <el-form-item label="查询时间">
              <el-date-picker
                v-model="form.timeValue"
                type="datetimerange"
                align="center"
                size="small"
                style="width:335px;font-size: 12px"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设备编号">
            <el-input v-model="form.deviceId" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="SIM卡号">
            <el-input v-model="form.iccid" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="启用状态">
              <el-select v-model="form.inUse" clearable placeholder="请选择" size="small">
                  <el-option v-for="item in optionInUse" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="1">
          <el-form-item>
            <el-button type="primary" size="small" @click="onSubmit" v-show="resourceMap.querySimCard">&nbsp;&nbsp;查询&nbsp;&nbsp;</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="NewAdd" v-show="resourceMap.addSimCard">新增</el-button>
      <el-button type="primary" size="small" icon="el-icon-delete" @click="onSelectDel" v-show="resourceMap.deleteSimCard" >删除选中</el-button>
    </div>
    <br>
    <!----------------- 设备列表 start ---------------->
    <el-table :data="tableData.list" border size="small" :max-height="windowHeight" style="width: 100%"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" ></el-table-column>      
      <el-table-column prop="deviceId" sortable label="设备编号"></el-table-column>
      <el-table-column prop="iccid" sortable label="SIM卡号"></el-table-column>
      <el-table-column prop="deviceType" sortable label="设备类型"></el-table-column>
      <el-table-column prop="producer" sortable label="生产厂家"></el-table-column>
      <el-table-column prop="status" sortable label="启用状态">
        <template slot-scope="scope">
            <span class="label-outuse" v-if="scope.row.status">未启用</span>
            <span class="label-inuse" v-else>已启用</span>
        </template>
      </el-table-column>
      <el-table-column prop="install" sortable label="安装状态">
        <template slot-scope="scope">
            <span class="label-outuse" v-if="scope.row.install">未安装</span>
            <span class="label-inuse" v-else>已安装</span>
        </template>
      </el-table-column>
      <el-table-column prop="gmt_modified" sortable label="修改时间" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index,scope.row)" v-show="resourceMap.updateSimCard">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="form.page"
      :page-sizes="[20,50,100,150,200]"
      :page-size="form.pageSize"
      layout="sizes, prev, pager, next"
      :total="tableData.totalCount">
    </el-pagination> 
    <!----------------- 设备列表 end ---------------->

    <!-- dialog NewAdd-->
    <el-dialog :title="changeTitle" :visible.sync="dialogDevice" width="40%">
      <el-form :model="formDialogData" :rules="rules" ref="formDialogData">
        <el-row>
          <el-col :md="20" :lg="12">
            <el-form-item label="设备编号:" prop="deviceId" :label-width="formLabelWidth">
              <el-input v-model="formDialogData.deviceId" size="small" auto-complete="off" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="20" :lg="12">
            <el-form-item label="设备类型:" prop="deviceType" :label-width="formLabelWidth">
              <el-input v-model="formDialogData.deviceType" size="small" auto-complete="off" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="20" :lg="12">
            <el-form-item label="绑定SIM卡:" prop="iccid" :label-width="formLabelWidth">
              <el-input v-model="formDialogData.iccid" size="small" @focus="simFocus"  auto-complete="off" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="20" :lg="12">
            <el-form-item label="绑定车辆：" prop="vin" :label-width="formLabelWidth">
              <el-input v-model="formDialogData.vin" size="small" @focus="vehicleFocus" auto-complete="off" style="width:100%"></el-input>
            </el-form-item>
          </el-col>          
          <el-col :md="20" :lg="12">
            <el-form-item label="硬件版本号：" prop="hardwareVersion" :label-width="formLabelWidth">
              <el-input v-model="formDialogData.hardwareVersion" size="small" auto-complete="off" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="20" :lg="12">
            <el-form-item label="软件版本号：" prop="softwareVersion" :label-width="formLabelWidth">
              <el-input v-model="formDialogData.softwareVersion" size="small" auto-complete="off" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="20" :lg="12">
            <el-form-item label="是否安装：" prop="install" :label-width="formLabelWidth">
                <el-select v-model="formDialogData.install" clearable placeholder="请选择" size="small" style="width:100%">
                  <el-option v-for="item in optionInUse" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="20" :lg="12">
            <el-form-item label="是否启用：" prop="status" :label-width="formLabelWidth">
                <el-select v-model="formDialogData.status" clearable placeholder="请选择" size="small" style="width:100%">
                  <el-option v-for="item in optionInUse" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="20" :lg="12">
            <el-form-item label="生产时间：" prop="productTime" :label-width="formLabelWidth">
              <el-date-picker 
                type="date" 
                placeholder="选择日期"  
                v-model="formDialogData.productTime" 
                value-format="yyyy-MM-dd HH:mm:ss" 
                size="small"
                style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :md="20" :lg="12">
              <el-form-item label="生产厂家：" prop="producer" :label-width="formLabelWidth">
                <el-input v-model="formDialogData.producer" size="small" auto-complete="off" style="width:100%"></el-input>
              </el-form-item>
            </el-col>
          <el-col :md="20" :lg="12">
            <el-form-item label="备注信息：" prop="remark" :label-width="formLabelWidth">
              <el-input v-model="formDialogData.remark" size="small" auto-complete="off" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row  type="flex" justify="end">
          <el-form-item>
            <el-button @click="dialogDevice = false" size="small">取 消</el-button>
            <el-button type="primary" @click="resetForm('formDialogData')" size="small" plain>重置</el-button>
            <el-button type="primary" @click="newAddSubmit('formDialogData')" size="small">确 定</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
    <!----------------- dialog bindSIM ---------------->
    <el-dialog title="绑定SIM卡" :visible.sync="dialogSIM"  width="40%">
      <el-table :data="simData.list" border size="small" highlight-current-row @current-change="simTableCurrentChange">
        <el-table-column type="index" ></el-table-column>      
        <el-table-column prop="simNo" sortable label="卡号"></el-table-column>
        <el-table-column prop="producer" sortable label="运营商"></el-table-column>
        <el-table-column prop="gmt_modified" sortable label="修改时间" show-overflow-tooltip></el-table-column>
      </el-table>
      <br>
      <el-pagination
        background
        @current-change="simhandleCurrentChange"
        :current-page.sync="formSIM.page"
        :page-size="formSIM.pageSize"
        :total="simData.totalCount">
      </el-pagination> 
    </el-dialog>
    <!----------------- dialog bindVehicle ---------------->
    <el-dialog title="绑定车辆" :visible.sync="dialogVehicle"  width="40%">
      <el-table :data="vehicleData.list" border size="small" highlight-current-row @current-change="vehicleTableCurrentChange">
        <el-table-column type="index" ></el-table-column>      
        <el-table-column prop="vinCode" sortable label="车架号"></el-table-column>
        <el-table-column prop="plateNo" sortable label="车牌号"></el-table-column>
        <el-table-column prop="gmt_modified" sortable label="修改时间" show-overflow-tooltip></el-table-column>
      </el-table>
      <br>
      <el-pagination
        background
        @current-change="vehiclehandleCurrentChange"
        :current-page.sync="formVehicle.page"
        :page-size="formVehicle.pageSize"
        :total="vehicleData.totalElement">
      </el-pagination> 
    </el-dialog>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          addShow:false,
          resourceMap:storageLocal.getName('simCard'),
          tableData: [],
          simData:[],//绑定sim卡数据
          formSIM: {//绑定sim卡分页
            page:1,
            pageSize:15,
          },
          vehicleData:[],//绑定车辆数据
          formVehicle: {//绑定车辆分页
            page:1,
            pageSize:15,
          },
          form: {
            page:1,
            pageSize:20,
          },
          changeTitle:'',
          dialogDevice: false,
          dialogSIM: false,
          dialogVehicle:false,
          formDialogData: {
            deviceId: "",
            deviceType: "",
            iccid: "",
            simCardId:"",
            producer: "",
            productTime: "",
            install: 0,
            status: 0,
            hardwareVersion: "",
            softwareVersion: "",
            remark: "",
          },
          rules: {
            deviceId: [
              { required: true, message: '请输入设备编号', trigger: 'blur' },
              // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            deviceType: [
              { required: true, message: '请输入设备类型', trigger: 'change' }
            ],
            iccid: [
              { required: true, message: '请选择SIM卡', trigger: 'change' }
            ],
            vin: [
              { required: true, message: '请选择车辆', trigger: 'change' }
            ],
            softwareVersion: [
              { required: true, message: '请输入软件版本号', trigger: 'change' }
            ],
            hardwareVersion: [
              { required: true, message: '请输入硬件版本号', trigger: 'change' }
            ],
          },
          formLabelWidth: '120px',
          windowHeight: (window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 220,
          multipleSelection:[],
          optionInUse:[{
            value:0,
            label:'启用'
          },{
            value:1,
            label:'不启用'
          }]
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.requestModel()
        })
      },
      updated:function(){
        this.addShow = true
      },
      methods: {
          NewAdd:function(){//点击新增按钮
            var _this = this;
            this.formDialogData = {
              deviceId: "",
              deviceType: "",
              iccid: "",
              simCardId:"",
              producer: "",
              productTime: "",
              install: 0,
              status: 0,
              hardwareVersion: "",
              softwareVersion: "",
              remark: "",
            }
            this.dialogDevice = true
            this.changeTitle = "新增设备"
            setTimeout(function(){
              _this.$refs['formDialogData'].resetFields();
            },0)
          },
          onSubmit:function() {//查询提交
            this.currentPage = 1;
            this.requestModel()
          },
          handleSelectionChange:function(val){//checkbox
            this.multipleSelection = val;
          },
          newAddSubmit:function(formName){//新增用户,更新用户 -- 提交
            var _this = this;
            var data = this.formDialogData;
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  if(data.id){//更新 
                    resourceRequst("/device/updateDevice",data,function(res){
                        _this.$message({message: '修改成功',type: 'success'});
                        _this.dialogDevice = false
                        _this.requestModel()
                    })
                  }else{//新增
                    resourceRequst("/device/addDevice",data,function(res){
                        _this.tableData.list.unshift(res.deviceEntity);
                        _this.$message({
                          message: '添加成功',
                          type: 'success'
                        });
                        _this.dialogDevice = false
                    })
                  }
              } else {
                return false;
              }
            });
          },
          resetForm:function(formName){//重置
            this.$refs[formName].resetFields()
          },
          /**
          * 绑定SIM卡
          * simTableCurrentChange -- table单选
          **/
          simFocus:function(event){//sim卡模态框 focus 事件
            this.simRequestModel()
          },
          simhandleCurrentChange:function(val) {//分页--发生变化
            this.simRequestModel()
          },
          simRequestModel:function(){//sim卡 request
            var _this = this
            var data = {
              page:this.formSIM.page,
              pageSize:this.formSIM.pageSize
            }
            resourceRequst("/simCard/querySimCard",data,function(res){
              _this.simData = res
              _this.dialogSIM = true
            })
          },
          simTableCurrentChange(val) {
            if(val && Object.keys(val).length){
              this.dialogSIM = false
              this.formDialogData.simCardId = val.id
              this.formDialogData.iccid = val.simNo
            } 
          },          
          /**
          * 绑定车辆
          **/
          vehicleFocus:function(event){//车辆模态框 focus 事件
            this.vehicleRequestModel()
          },
          vehiclehandleCurrentChange:function(val) {//分页--发生变化
            this.vehicleRequestModel()
          },
          vehicleRequestModel:function(){//车辆 request
            var _this = this
            var data = {
              page:this.formVehicle.page - 1,
              pageSize:this.formVehicle.pageSize,
              bind:0
            }
            resourceRequst("/vehicle/queryVehicleInfo",data,function(res){
              _this.vehicleData = res.getResult
              _this.dialogVehicle = true
            })
          },
          vehicleTableCurrentChange(val) {
            if(val && Object.keys(val).length){
              this.dialogVehicle = false
              this.formDialogData.vehicleId = val.id
              this.formDialogData.vin = val.vinCode
            } 
          },
          /**
          * tbox table
          **/
          onSelectDel:function() {//删除操作
            var _this = this;
            if(this.multipleSelection.length == 0){
              this.$message({ showClose: true, message: '提示，还未选中对象', type: 'warning', duration:1500 });
              return
            }
            var arry = _.map(_this.multipleSelection, function(num){ 
              return num.id; 
            });
            this.$alert('此操作将删除选中数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              showCancelButton:true,
              type: 'warning',
              callback: function(action){
                if (action == "confirm") {
                  var data = {allKeys:arry}
                  resourceRequst("/device/deleteDevice",data,function(res){
                    var table = _.filter(_this.tableData.list, function(item){ 
                      return arry.indexOf(item.id) < 0 
                    });
                    _this.tableData.list = table;
                    _this.$message({ type: 'success', message: "删除成功！" });
                  })
                }
              }
            });
          },
          handleEdit:function(index, row) {//编辑
            var item = JSON.stringify(row)
            this.formDialogData = JSON.parse(item);
            this.dialogDevice = true;
            this.changeTitle = "编辑设备"
          },
          handleSizeChange:function(val) {//table分页
            this.form.page = 1;
            this.form.pageSize = val;
            this.requestModel()
          },
          handleCurrentChange:function(val) {//分页--每页显示N条发生变化
            this.requestModel()
          },
          requestModel:function(){
            var _this = this;
            var data = this.form
            resourceRequst("/device/queryObdDeviceList",data,function(res){
              _this.tableData = res
              _this.tableData.totalCount = res.pagination.total
            })
          }
      }
    })
  </script>
</html>